<template>
  <div class="section-title">{{title}}</div>
</template>

<script>
export default {
  name: 'section-title',
  props: {
    title: {
      type: String
    }
  }
}
</script>

<style lang="stylus">
$size = 5px;

.section-title {
  position: relative;
  margin-bottom: 1em;
  padding-left: 2 * $size;

  &:before {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    content: '';
    width: $size;
    height: 1.2em;
    border-radius: 0.5 * $size;
    background-color: $main-color;
  }
}
</style>
